import React, {Component} from 'react'
import {browserHistory} from 'react-router'
import {connect} from 'react-redux'

import {Layout, Breadcrumb} from 'antd';
import HeaderView from './views/header';
import SideMenu from './views/menu';
import BreadcrumbView from './views/breadcrumb';
const {Content, Footer, Sider} = Layout;


class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
        }
    }

    onCollapse(collapsed) {
        console.log(collapsed);
        this.setState({collapsed});
    }

    render() {
        // if (!this.props.authenticated) {
        //     browserHistory.replace('/login');
        // }

        return (
            <Layout style={{height: '-webkit-fill-available'}}>
                <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                    <div className="logo">
                        <img src="/logo.png" style={{width:40, height:40}}/>
                        <span style={{color: 'white'}}>后台管理平台</span>
                    </div>
                    <SideMenu/>
                </Sider>
                <Layout>
                    <HeaderView />
                    <Content style={{margin: '0 16px'}}>
                        <BreadcrumbView />
                        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
                            {this.props.children}
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
                        山东人团队 2017
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}

function mapStateToProps({auth}) {
    let {authenticated, user} = auth;
    return {
        authenticated,
        user,
    }
}

function mapActionToProps(dispatch) {
    return {
        logout: ()=>dispatch({type: 'logout', payload: {}})
    }
}

export default connect(mapStateToProps, mapActionToProps)(Main)
